/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import TabBarItem1 from "./View/Home/Home";
import TabBarItem2 from "./View/Statistical/Statistical";
import TabBarItem3 from "./View/AboutMe/AboutMe";

import {connect} from 'react-redux';
import {UserFromStorage} from './Action/UserAction';
class TabBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'TabBarItem1',
            selectedTabName: 'TabBarItem1',
        };
    }

    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(UserFromStorage());
        let tabbar = 'TabBarItem1';
        if (this.props.selectedTabName == 1) tabbar = 'TabBarItem1';
        if (this.props.selectedTabName == 2) tabbar = 'TabBarItem2';
        if (this.props.selectedTabName == 3) tabbar = 'TabBarItem3';
        this.state = {
            selectedTab: tabbar,
        };
    }

    render() {
        let selectColor = '#000000';
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        key="1"
                        selected={this.state.selectedTab === 'TabBarItem1'}
                        title='首页'
                        renderIcon={() => <Image resizeMode='contain'
                                                 source={require('./Resource/Imgs/tabar_home_normal.png')}
                                                 style={styles.iconimage}/>}
                        renderSelectedIcon={() => <Image resizeMode='contain'
                                                         source={require('./Resource/Imgs/tabar_home_selected.png')}
                                                         style={styles.iconimage}/>}
                        selectedTitleStyle={{color: selectColor}}

                        onPress={() => this.setState({selectedTab: 'TabBarItem1'})}>
                        <TabBarItem1 navigator={this.props.navigator}/>

                    </TabNavigator.Item>
                    <TabNavigator.Item
                        key="2"
                        selected={this.state.selectedTab === 'TabBarItem2'}
                        title="统计"
                        renderIcon={() => <Image resizeMode='contain' style={styles.iconimage}
                                                 source={require('./Resource/Imgs/tabar_statistics_normal.png')}/>}
                        renderSelectedIcon={() => <Image resizeMode='contain' style={styles.iconimage}
                                                         source={require('./Resource/Imgs/tabar_statistics_selected.png')}/>}
                        selectedTitleStyle={{color: selectColor}}
                        onPress={() => this.setState({selectedTab: 'TabBarItem2'})}>
                        <TabBarItem2 navigator={this.props.navigator}/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        key="3"
                        selected={this.state.selectedTab === 'TabBarItem3'}
                        title="账号"
                        renderIcon={() => <Image resizeMode='contain' style={styles.iconimage}
                                                 source={require('./Resource/Imgs/tabar_account_normal.png')}/>}
                        renderSelectedIcon={() => <Image resizeMode='contain' style={styles.iconimage}
                                                         source={require('./Resource/Imgs/tabar_account_selected.png')}/>}
                        selectedTitleStyle={{color: selectColor}}
                        onPress={() => this.setState({selectedTab: 'TabBarItem3'})}>
                        <TabBarItem3 navigator={this.props.navigator}/>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    iconimage: {
        width: 23,
        height: 23
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

export default connect((state) => {
    return {UserReducer} = state;
})(TabBar);